<template>
  <div>
    <CategorySelector></CategorySelector>
    <el-card style="margin-top:10px">
      <SpuList v-if="scene===1" @changeScene="saveScene" @getSpuInfo='saveSpuInfo'></SpuList>
      <SpuForm v-if="scene===2" @changeScene="saveScene"  :currentSpuInfo="currentSpuInfo"></SpuForm>
      <SkuForm v-if="scene===3" @getSpuInfo='saveSpuInfo'  @changeScene="saveScene" :currentSpuInfo="currentSpuInfo" ></SkuForm>
    </el-card>
  </div>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
import SpuList from './components/SpuList.vue'
import SpuForm from './components/SpuForm.vue'
import SkuForm from './components/SkuForm.vue'
export default {
  name: 'Spu',
  components: { CategorySelector,SpuList,SpuForm,SkuForm }
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const scene = ref(3)
const currentSpuInfo = ref([])
const saveScene = (val: any) => {
  scene.value=val
}

//接收spulist传递过来的 row数据
const saveSpuInfo = (val:any) => {
  // console.log('spuInfo',val)
  currentSpuInfo.value = {
    ...val,
    //因为此时currentSpuInfo里面的spuImageList和spuSaleAttrList数值是null,我们需要数组数据
    spuImageList:[], // 为了避免报错 需要添加上这两个属性
    spuSaleAttrList:[]
  }
  

}
</script>